<!DOCTYPE html>
<style type="text/css">
    #menu div{
        float:left;
        width:132px;
        padding:0;
        margin:0;
        height:32px;
        line-height:32px;
        text-align: center;
        background-color:white;
        color:black;
        cursor:pointer;
        margin-top:70px;
    }
    #menu div:hover{
        color:black;
        background-color:rgb(231, 241, 233);
    }
    #menu div.active{
        background-color:green;
        color:white;
    }
    
    body{
        text-align:center;
        margin:0;
        font-family:arial;
        background-color: rgb(240, 242, 255);
    }
    #container{
        background-color:white;
        width:1056px;
        text-align:left;
        margin: 0 auto;
        box-shadow: 0px 0px 22px -2px rgb(58, 58, 58);
        -moz-box-shadow: 0px 0px 22px -2px rgb(58, 58, 58);
        -webkit-box-shadow: 0px 0px 22px -2px rgb(58, 58, 58);
        border-radius: 10px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        min-height:400px;
    }
    #header{
        height:70px;
        background-color:green;
        width:100%;
        position: absolute;
        left: 0;
        text-align:center;
        box-shadow: 2px 0px 10px rgb(19, 19, 19);
        -moz-box-shadow: 2px 0px 10px rgb(19, 19, 19);
        -webkit-box-shadow: 2px 0px 10px rgb(19, 19, 19);
    }
    #header_container{
        margin:0 auto;
        text-align:left;
        width:1056px;
        height:100%;
    }
    #content_container{
        clear:both;
    }
    .menu_item.active{
        z-index: 2;
        position: relative;   
        box-shadow: 0px 2px 5px #888;
        -moz-box-shadow: 0px 2px 5px #888;
        -moz-box-shadow: 0px 2px 5px #888;
        border-radius: 0px 0px 5px 5px; 
        -moz-border-radius: 0px 0px 5px 5px; 
        -moz-border-radius: 0px 0px 5px 5px; 
    }
</style>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>{% block title %}Salgamos{% endblock %}</title>
        {% block stylesheets %}{% endblock %}
        <link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />
    </head>
    <body>
        <div id="container">
            <div id="menu_container">
                <div id="header">
                    <div id="header_container"></div>
                </div>
                <div id="menu">
                    <a href="#inicio"><div class="menu_item" data-for="#inicio">Inicio</div></a>
                    {% for category in categories%}
                        <a href="#{{category.alias}}"><div class="menu_item" data-for="#{{category.alias}}">{{category.name}}</div></a>
                    {% endfor %}
                    <a href="#itinerario"><div class="menu_item" data-for="#itinerario">Itinerario</div></a>
                </div>
            </div>
            <div id="content_container" style="margin:20px;">
                {% block body %}{% endblock %}
                {% block javascripts %}{% endblock %}
            </div>
        </div>
    </body>
    <script type="text/javascript" src="{{ asset('bundles/salgamosfrontend/js/jquery-1.9.1.min.js') }}"></script>
    <script type=text/javascript>
        var ajax = null;
        $(document).ready(function() {
            refreshHash();
            window.onhashchange = function(){
                refreshHash();
            };
        });
        function refreshHash(){
            $content = $('#content_container');
            $content.fadeOut('slow');
            var hash = location.hash;
            if(hash=='')
                location.hash = '#inicio';
            $('.menu_item.active').removeClass('active');
            $('#menu').find('[data-for="'+hash+'"]').addClass('active');
            var  splitHash = hash.split('/');
            
            switch(splitHash[0]){
                case('#location'):
                    $.post('location/'+splitHash[1],{},function(data){
                            $content.html(data);
                            $content.fadeIn('slow');
                    });
                    break;
                case('#inicio'):
                    $content.html('');
                    $content.fadeIn('slow');
                    break;
                case('#gastronomia'):
                    $.post('category/gastronomia',{},function(data){
                            $content.html(data);
                            $content.fadeIn('slow');
                    });
                    break;
                case('#after_ofice'):
                    $.post('category/after_ofice',{},function(data){
                            $content.html(data);
                            $content.fadeIn('slow');
                    });
                    break;
                case('#sport'):
                    $.post('category/sport',{},function(data){
                            $content.html(data);
                            $content.fadeIn('slow');
                    });
                    break;
                case('#tour'):
                    $.post('category/tour',{},function(data){
                            $content.html(data);
                            $content.fadeIn('slow');
                    });
                    break;
                case('#entretainment'):
                    $.post('category/entretainment',{},function(data){
                            $content.html(data);
                            $content.fadeIn('slow');
                    });
                    break;
                case('#escapada'):
                    loadingAjax = true;
                    $.post('category/escapada',{},function(data){
                            $content.html(data);
                            $content.fadeIn('slow');
                    });
                    break;
                case('#itinerario'):
                    $('#content_container').html('');
                    $('#content_container').fadeIn('slow');
                    break;
            }
        }
    </script>
</html>
